<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断用户名是否存在</title>
</head>
<body>
用户名:
<input type="text" id="user" name="user" placeholder="请输入用户名"> <span id="info"></span>

<script type="text/javascript">
     //编写文本框失去焦点的事件
     document.getElementById("user").onblur=function () {
         //1.创建一个JS请求对象
         let request = new XMLHttpRequest();
         //2.设置请求对象的事件
         /*
         准备状态发生改变激活的事件：
         准备状态的取值：
         0. 表示还没有发送请求
         1. 请求开始发送
         2. 请求已经结束
         3. 开始接收响应
         4. 响应已经结束
         服务器状态码：
         200 正确响应
         404 资源不存在
         500 服务器内部错误
          */
         request.onreadystatechange=function () {
             //要有请求发送的时候才会执行，一开始不会马上执行的
             //准备状态等于4，而且服务器的状态码是200，才开始接收服务器返回的数据
            if (request.readyState == 4 && request.status == 200) {
                //接收服务器返回的数据
                //将服务器返回的数据放在span标签中
                document.getElementById("info").innerText = request.responseText;
            }
         }
         //获取文本框中值, this表示文本框
         let url = "Demo1CheckUserServlet?user=" + this.value;
         //3.打开服务器端的连接 参数：请求方式，请求地址，异步true同步false
         request.open("GET", url, true);
         //4.发送请求
         request.send();
     }
</script>
</body>
</html>